<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>我的</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息</el-breadcrumb-item>
      <el-breadcrumb-item><b>证件信息</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div style="margin:20px">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            @click="handleAdd"
        ><el-icon><Plus /></el-icon>新增</el-button>
      </el-col>
    </el-row>
  <el-table  :data="documentList">
    <el-table-column label="创建日期" align="center" prop="creationDate" width="180">
<!--      <template #default="scope">
        <span>{{ parseTime(scope.row.creationDate, '{y}-{m}-{d}') }}</span>
      </template>-->
    </el-table-column>
    <el-table-column label="备注" align="center" prop="notes" />
    <el-table-column label="证件有效日期" align="center" prop="effectiveDate" width="180">
<!--      <template #default="scope">
        <span>{{ parseTime(scope.row.effectiveDate, '{y}-{m}-{d}') }}</span>
      </template>-->
    </el-table-column>
    <el-table-column label="证件类型" align="center" prop="documentType" />
<!--    <el-table-column label="照片" align="center" prop="photo" width="100">
      <template #default="scope">
        <image-preview :src="scope.row.photo" :width="50" :height="50"/>
      </template>
    </el-table-column>-->
    <el-table-column label="证件编号" align="center" prop="documentNum" />
    <el-table-column label="往返次数" align="center" prop="returnNum" />
    <el-table-column label="证件时效" align="center" prop="state" />
    <el-table-column label="保管机构" align="center" prop="custodian" />
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template #default="scope">
        <el-button size="small"  @click="handleUpdate(scope.row)">
          <el-icon><Edit /></el-icon>修改</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row)">
          <el-icon><Delete /></el-icon>删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
  <!-- 添加或修改证件信息对话框 -->
  <el-dialog :title="title" v-model="open" width="600px" append-to-body>
    <el-form ref="documentRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="备注" prop="notes">
        <el-input v-model="form.notes" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="证件有效日期" prop="effectiveDate">
        <el-date-picker clearable
                        v-model="form.effectiveDate"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择证件有效日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="证件类型" prop="documentType">
        <el-select
            v-model="form.documentType"
            placeholder="证件类型"
            clearable >
          <el-option
              v-for="item in documentType"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
<!--      <el-form-item label="照片" prop="photo">
        <el-input v-model="form.photo" placeholder="请输入照片" />
      </el-form-item>-->
      <el-form-item label="证件编号" prop="documentNum">
        <el-input v-model="form.documentNum" placeholder="请输入证件编号" />
      </el-form-item>
      <el-form-item label="往返次数" prop="returnNum">
        <el-input v-model="form.returnNum" placeholder="请输入往返次数" />
      </el-form-item>
      <el-form-item label="证件时效" prop="state">
        <el-select
            v-model="form.state"
            placeholder="证件时效"
            clearable >
          <el-option
              v-for="item in stateType"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="保管机构" prop="custodian">
        <el-input v-model="form.custodian" placeholder="请输入保管机构" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import request from '@/utils/mine'
import {ref,reactive,onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {ArrowRight,Edit,Delete,Plus} from "@element-plus/icons-vue";
import {parseTime} from "element-plus/es/components/time-select/src/utils";
const documentList = ref([]);
const title = ref("");
const open = ref(false);
const userInfo = reactive({
  'username' :null
})
const rules=reactive({
  number: [
    { required: true, message: "工号不能为空", trigger: "blur" }
  ],
  creationDate: [
    { required: true, message: "创建日期不能为空", trigger: "blur" }
  ],
  effectiveDate: [
    { required: true, message: "证件有效日期不能为空", trigger: "blur" }
  ],
  documentType: [
    { required: true, message: "证件类型不能为空", trigger: "change" }
  ],
  photo: [
    { required: true, message: "照片不能为空", trigger: "blur" }
  ],
  documentNum: [
    { required: true, message: "证件编号不能为空", trigger: "blur" }
  ],
  state: [
    { required: true, message: "证件时效不能为空", trigger: "blur" }
  ]
})
const now = new Date();
// 格式化日期，这里以YYYY-MM-DD为例
const formattedDate = now.getFullYear() + '-' +
    ('0' + (now.getMonth() + 1)).slice(-2) + '-' +
    ('0' + now.getDate()).slice(-2);
// 新增表单初始化数据
const formAddData={
  id: null,
  number: userInfo.username,
  creationDate: formattedDate,
  notes: null,
  effectiveDate: null,
  documentType: null,
  photo: null,
  documentNum: null,
  returnNum: null,
  state: null,
  custodian: null
}
// 新增表单绑定数据模型
const form = reactive({...formAddData})
const documentType=[
  {label : '护照' , value : 1}
  ,{label : '往来港澳通行证' , value : 2}
  ,{label : '往来台湾通行证' , value : 3}
  ,{label : '其他' , value : 4}
]

const stateType=[
  {label : '有效' , value : 1}
  ,{label : '过期' , value : 2}
]
onMounted( () => {
  // 从SessionStorage取出数据
  let userstr = sessionStorage.getItem('loginUser')

  userInfo.username = JSON.parse(userstr).username

  getList()
});
/** 查询证件信息列表 */
function getList() {
  /*listDocument(queryParams.value)*/
  request({
    url: '/document/listBynum',
    method: 'get',
    params: {number:userInfo.username}
  }).then(response => {
    documentList.value = response.data;
  });
}

/** 新增按钮操作 */
function handleAdd() {
  Object.assign(form , formAddData)/* form类型reactive*/
  /*form.value=[]
  form.value.number=234*/
  open.value = true;
  title.value = "添加证件信息";
}
/** 修改按钮操作 */
const handleUpdate=(row)=> {
  open.value=true
  title.value = "修改证件信息";
  request({
    url:'/document/selectById',
    method:'GET',
    params:{
      id:row.id
    }
  }).then((req)=>{
    console.log(req.data+"____________")
    /*form.value=req.data*/
    form.id=req.data.id
    form.number=req.data.number
    form.creationDate=req.data.creationDate
    form.notes=req.data.notes
    form.effectiveDate=req.data.effectiveDate
    form.documentType=req.data.documentType
    form.photo=req.data.photo
    form.documentNum=req.data.documentNum
    form.returnNum=req.data.returnNum
    form.state=req.data.state
    form.custodian=req.data.custodian
  })
}
// 取消按钮
function cancel() {
  open.value = false;
}
/** 提交按钮 */
function submitForm() {
  if(form.id!=null) {
    request({
      url: '/document/update',
      method: 'PUT',
      params: form
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '修改成功',
        });
        open.value = false
        getList()
      } else {
        ElMessage({
          type: 'info',
          message: '修改失败',
        });
      }
    })
  }else{
    request({
      url: '/document/insert',
      method: 'POST',
      params: form
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '新增成功',
        });
        open.value = false
        getList()
      } else {
        ElMessage({
          type: 'info',
          message: '新增失败',
        });
      }
    })
  }
}


/** 删除按钮操作 */
function handleDelete(row) {
  ElMessageBox.confirm(
      '确认删除这个证件吗 ',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    request({
      url: '/document/delete',
      method: 'DELETE',
      params: {
        id: row.id
      }
    }).then((req) => {
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        });
        open.value = false
        getList()
      } else {
        ElMessage({
          type: 'info',
          message: '删除失败',
        });
      }
    })
  })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        });
      });
}
</script>

<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
</style>